<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router';
import { requestPlaylistDetail } from '../../utils/axiosURL'
import indexText from './indexText.json'

const router = useRoute()
// 歌单ID
const songListID = ref<any>(router.params.id)
// 存储歌单详情
const songListDetail = reactive<any>([])
// 路由选中下标
let childActive = ref<any>(0)

// 获取歌单详情
const requestSongListDetailFn = () => {
  requestPlaylistDetail(songListID.value).then((data: any) => {
    songListDetail.values = data.playlist
  }).catch(_ => { })
}
// 子路由下标
const clickIndex = (index: number) => childActive.value = index
onMounted(() => {
  requestSongListDetailFn()
})

</script>


<template>
  <div class="detailWrap">
    <div class="topInformation" v-if="songListDetail.values.length !== 0">
      <div class="leftImgWrap">
        <img :src="`${songListDetail.values.coverImgUrl}`" alt="">
      </div>
      <div class="rightInfoWrap">
        <p class="infoTitle">
          <span>{{ indexText.songListText }}</span>
          <span>{{ songListDetail.values.name }}</span>
        </p>
        <p class="officialAccountNumber">
          <img :src="`${songListDetail.values?.creator?.avatarUrl}`">
          <RouterLink to="/">
            <span>{{ songListDetail.values.creator?.nickname }}</span>
          </RouterLink>
          <span>{{ indexText.createTimeText }}: {{
            new Date(songListDetail.values.createTime).getFullYear()
            + '-' + (parseInt(new Date(songListDetail.values.createTime).getMonth()) + 1)
            + '-' + new Date(songListDetail.values.createTime).getDate()
          }}</span>
        </p>
        <div class="moreFunctions">
          <div class="addplay">
            <div class="addplay_Left">
              <span class="iconfont icon-xiasanjiaoxing"></span>
              <span>{{ indexText.playAll }}</span>
            </div>
            <div class="addSongList">
              <span class="iconfont icon-jiahao"></span>
            </div>
          </div>
          <div class="collectionAll">
            <span class="iconfont icon-wj-wjj"></span>
            <span>{{ indexText.collectText }}({{
              songListDetail.values.subscribedCount >= 10000
              ? Math.ceil(songListDetail.values.subscribedCount / 10000000) + '亿'
              : songListDetail.values.subscribedCount >= 10000
                ? Math.ceil(songListDetail.values.subscribedCount / 10000) + '万'
                : songListDetail.values.subscribedCount
            }})</span>
          </div>
          <div class="share">
            <span class="iconfont icon-fenxiang"></span>
            <span>
              {{ indexText.shareText }}({{
                songListDetail.values.shareCount >= 10000
                ? Math.ceil(songListDetail.values.shareCount / 10000) + '万'
                : songListDetail.values.shareCount
              }})
            </span>
          </div>
          <div class="downloadAll">
            <span class="iconfont icon-xiazai"></span>
            <span>{{ indexText.downLoadAll }}</span>
          </div>
        </div>
        <div class="songListDetailDESC">
          <p>
            <span>{{ indexText.tagText }}: </span>
            <span class="songLabel" v-for="item in songListDetail.values.tags">{{ item }}</span>
          </p>
          <p>
            <span>{{ indexText.songText }}: </span>
            <span>{{ songListDetail.values.trackCount }}</span>
            <span class="playNum">{{ indexText.playText }}: </span>
            <span>{{
              songListDetail.values.playCount >= 100000000
              ? Math.floor(songListDetail.values.playCount / 100000000) + '亿'
              : songListDetail.values.playCount >= 10000
                ? Math.floor(songListDetail.values.playCount / 10000) + '万'
                : songListDetail.values.playCount
            }}</span>
          </p>
          <p>
            <span>{{ indexText.introductionText }}: </span>
            <span :title="`${songListDetail.values.description}`">{{ songListDetail.values.description }}</span>
          </p>
        </div>
      </div>
    </div>
    <songListDynamicSkeleton v-else />
    <div class="songDetailChildView">
      <div class="childBar">
        <div class="leftBarWrap">
          <ul v-if="songListDetail.values.length !== 0">
            <router-link v-for="(item, index) in indexText.childRouter"
              :to="{ path: item.to, query: { id: songListID } }">
              <li @click="clickIndex(index)" :class="`${childActive === index ? 'childActives' : ''}`">
                {{ item.text }}
                <span v-if="item.code === 'Comment'">
                  ({{
                    songListDetail.values.commentCount >= 10000
                    ? Math.floor(songListDetail.values.commentCount / 10000) + '万'
                    : songListDetail.values.commentCount
                  }})
                </span>
              </li>
            </router-link>
          </ul>
          <el-skeleton v-else :rows="0" />
        </div>
        <div class="leftRightSearch"></div>
      </div>
      <router-view />
    </div>
  </div>
</template>


<style lang="scss" scoped>
.detailWrap {
  height: 93%;
  padding-bottom: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.topInformation {
  display: flex;
  width: 100%;
  height: 180px;
  margin-top: 20px;

  .leftImgWrap {
    flex-basis: 180px;
    height: 180px;
    border-radius: 6px;
    margin: 0 25px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .rightInfoWrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;

    .infoTitle {
      font-family: $activeTextFont;
      font-size: $font-size-lg2;

      span:nth-child(1) {
        font-family: $activeTextFont;
        font-size: $font-size-xs;
        // border: 1px solid $theme-red;
        border-width: 1px;
        border-style: solid;
        @include border_color('border_color');
        @include author_color('author_color');
        // color: $font_red_color;
        padding: 3px 4px 0px;
        margin-right: 10px;
        border-radius: 3px;
        vertical-align: 3px;
      }
    }

    .officialAccountNumber {
      img {
        width: 25px;
        vertical-align: -7px;
        border-radius: 25px;
      }

      span {
        font-size: $font-size-sm;
        font-family: $textFont;

        &:nth-child(1) {
          color: deepskyblue;
          margin: 0 10px;
        }
      }
    }

    .moreFunctions {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;

      .addplay {
        display: flex;
        width: 130px;
        height: 30px;
        //margin-left: 10px;
        border-radius: 25px;
        overflow: hidden;
        @include background_color('bk_color');

        .addplay_Left {
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-basis: 95px;
          color: $theme-white;
          font-family: $textFont;

          .icon-xiasanjiaoxing {
            transform: translateX(5px) rotate(-90deg);
            font-size: 20px;
          }

          &:hover {
            background-color: rgba(0, 0, 0, 0.174);
          }
        }

        .addSongList {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          color: $theme-white;

          &:hover {
            background-color: rgb(0, 0, 0, 0.174);
          }
        }

        &:hover {
          cursor: pointer;
          background-color: rgb(215, 53, 53);
        }
      }

      .collectionAll {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 30px;
        margin-left: 15px;
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 25px;
        font-family: $textFont;
        color: gray;
        border: .2px solid rgb(206, 206, 206);

        span:nth-child(1) {
          font-size: 20px;
          margin-right: 4px;
        }

        &:hover {
          background-color: rgb(242, 242, 242);
          cursor: pointer;
        }
      }

      .share {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 30px;
        margin-left: 15px;
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 25px;
        font-family: $textFont;
        color: gray;
        border: .2px solid rgb(206, 206, 206);

        span:nth-child(1) {
          font-size: 20px;
          margin-right: 4px;
        }

        &:hover {
          background-color: rgb(242, 242, 242);
          cursor: pointer;
        }
      }

      .downloadAll {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 30px;
        margin-left: 15px;
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 25px;
        font-family: $textFont;
        color: gray;
        border: .2px solid rgb(206, 206, 206);

        span:nth-child(1) {
          font-size: 20px;
          margin-right: 4px;
        }

        &:hover {
          background-color: rgb(242, 242, 242);
          cursor: pointer;
        }
      }
    }

    .songListDetailDESC {
      font-size: $font-size-sm;
      font-family: $textFont;

      >p {
        color: $font_main_color;
        line-height: 18px;

        &:nth-child(3) {
          width: 500px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .songLabel {
          color: rgb(11, 88, 176);
          margin-right: 8px;
        }

        .playNum {
          margin-left: 20px;
        }
      }
    }
  }
}

.songDetailChildView {
  width: 100%;
  margin-top: 40px;

  .childBar {
    display: flex;
    width: 100%;
    height: 30px;
    padding-left: 40px;
    box-sizing: border-box;

    .leftBarWrap {
      width: 50%;
      height: 100%;

      ul {
        display: flex;

        li {
          line-height: 30px;
          color: $font_main_color;
          font-family: $textFont;
          font-size: $font-size-sm;
          margin-right: 20px;
        }

        .childActives {
          position: relative;
          font-size: $font-size-md;
          font-family: $activeTextFont;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 3px;
            @include background_color('bk_color');
          }
        }
      }
    }

    .leftRightSearch {
      width: 50%;
      height: 100%;
    }
  }
}
</style>
